<template>
  <div class="page" style="height: 95%">
    <el-form label-width="100px" class="demo-ruleForm">
    <div class="tools-bar">
      <div class="left-wrap">
        <el-button size="small" type="primary" @click="submit">保存</el-button>
        <!-- {{moduleId(type)}} -->
      </div>
    </div>
      <el-form-item label="姓名:" prop="name">
        <el-input placeholder="请输入姓名" v-model="name"></el-input>
      </el-form-item>
      <el-form-item label="昵称:" prop="username">
        <el-input placeholder="请输入昵称" v-model="username"></el-input>
      </el-form-item>
      <el-form-item label="用户类型:" >
        <div style="width: 80%; height: 40px">
          <template>
            <el-radio v-model="radio" label="1">个人用户</el-radio>
            <el-radio v-model="radio" label="2" :onchange="display_input()">公司用户</el-radio>
          </template>
        </div>
      </el-form-item>
      <el-form-item label="公司名称:" prop="companyName" v-show="open">
        <el-input placeholder="请输入公司名称" v-model="companyName" :disabled="false"></el-input>
      </el-form-item>
      <el-form-item label="手机号码:" prop="mobile">
        <el-input placeholder="13888888888" v-model="mobile" :disabled="true"></el-input>
      </el-form-item>
      <el-form-item label="电子邮箱:" prop="email">
        <el-input placeholder="1144903845@qq.com" v-model="email" :disabled="true"></el-input>
      </el-form-item>
    </el-form>
    <div style="width: 80%;margin-left:2%; height: 40px" >
       <h3>请上传身份证正面照、身份证反面照、营业执照副本</h3>
    </div>
    <!--http://192.168.0.189:5566/api/user/insertFiles-->
    <div style="margin-left: 2%">
      <el-upload
        action="http://192.168.0.189:5566/api/user/insertFiles"
        list-type="picture-card"
        :limit="3"
        :on-preview="handlePictureCardPreview"
        :file-list="fileList"
        :on-remove="handleRemove">
        <i class="el-icon-plus"></i>
      </el-upload>
      <el-dialog :visible.sync="dialogVisible">
        <img width="100%" :src="dialogImageUrl" alt="">
      </el-dialog>
    </div>
  </div>
</template>

<script>
  import {api} from '@/utils'

  export default {
    methods: {
      //获取数据
      getData (param) {
        this.$axios.request({
          url: api.getuserId,
          method: 'post',
          params: param
        }).then(data => {
        let result = data.data;
        if (data.success === true) {
          console.log('userinfor',result);
          this.name = result.name;
          this.username = result.username;
          this.mobile = result.mobile;
          this.email = result.email;
          this.companyName = result.companyName;
          this.radio = result.patronType.toString()
        } else {
          this.$message({
            message: '请求失败',
            duration: 2000,
            type: 'error'
          })
        }
      })
      },
      submit() {
        let params = {
          name: this.name,
          userName : this.username,
          liveaddress : 'address',
          patrontype : this.radio,
          companyname : this.companyName
        };
        this.$axios.request({
          url: api.saveUserBasic,
          method: 'post',
          params: params
        }).then(data => {
          if (data.success === true) {
            console.log('info',data);
            this.$message({
              message: '保存成功',
              type: 'success'
            });
          } else {
            this.$message({
              message: '请求失败',
              duration: 2000,
              type: 'error'
            })
          }
        })
      },
      handlePictureCardPreview() {
        this.dialogImageUrl = file.url;
        console.log('123',this.dialogImageUrl)
        this.dialogVisible = true;
      },
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      display_input(){
        if(this.radio == 2){
          this.open = true;
        } else {
          this.open = false;
        }
      }
    },
    data() {
      return {
        name:'',
        username:'',
        mobile:'',
        email:'',
        companyName:'',
        radio:'1',
        dialogImageUrl:'',
        dialogVisible:false,
        dialogFormVisible:false,
        fileList:[]
      }
    },
    mounted() {
      this.getData()
    }
  }
</script>

<style scoped>

</style>
